import { createGlobalStyle } from 'styled-components';

export const GlobalStyles = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--adm-color-background);
    color: var(--adm-color-text);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;

    &::before,
    &::after {
      content: '';
      position: fixed;
      pointer-events: none;
      z-index: -1;
      opacity: 0.1;
      transition: all 0.3s ease;
    }
  }

  /* 粉色主题装饰 */
  [data-theme='pink'] body {
    &::before {
      content: '';
      position: fixed;
      top: 0;
      right: 0;
      width: 300px;
      height: 300px;
      background: url('/images/decorations/ram.jpeg') no-repeat center/contain;
      animation: float 6s ease-in-out infinite;
      pointer-events: none;
      z-index: -1;
      opacity: 0.1;
    }

    &::after {
      content: '';
      position: fixed;
      bottom: 0;
      left: 0;
      width: 280px;
      height: 280px;
      background: url('/images/decorations/rem.png') no-repeat center/contain;
      animation: float 6s ease-in-out infinite 1s;
      pointer-events: none;
      z-index: -1;
      opacity: 0.1;
    }
  }

  /* 绿色主题装饰 */
  [data-theme='green'] {
    .leaf-decoration {
      position: fixed;
      width: 40px;
      height: 40px;
      pointer-events: none;
      z-index: -1;
      opacity: 0.15;
      
      &::before,
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--adm-color-primary);
        clip-path: path('M20 0C20 11.046 11.046 20 0 20C11.046 20 20 28.954 20 40C20 28.954 28.954 20 40 20C28.954 20 20 11.046 20 0Z');
        filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.2));
      }

      &:nth-child(1) {
        top: 10%;
        right: 10%;
        transform: scale(1.5) rotate(45deg);
        animation: leafFloat1 15s ease-in-out infinite;
      }
      
      &:nth-child(2) {
        top: 40%;
        right: 5%;
        transform: scale(1.2);
        animation: leafFloat2 18s ease-in-out infinite;
      }
      
      &:nth-child(3) {
        bottom: 15%;
        left: 8%;
        transform: scale(1.3) rotate(-30deg);
        animation: leafFloat3 20s ease-in-out infinite;
      }
    }
  }

  /* 动画关键帧 */
  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes sway {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(5deg);
    }
  }

  @keyframes leafFloat1 {
    0%, 100% {
      transform: scale(1.5) rotate(45deg) translate(0);
    }
    50% {
      transform: scale(1.5) rotate(60deg) translate(-10px, 10px);
    }
  }

  @keyframes leafFloat2 {
    0%, 100% {
      transform: scale(1.2) rotate(0) translate(0);
    }
    50% {
      transform: scale(1.2) rotate(-15deg) translate(10px, -5px);
    }
  }

  @keyframes leafFloat3 {
    0%, 100% {
      transform: scale(1.3) rotate(-30deg) translate(0);
    }
    50% {
      transform: scale(1.3) rotate(-45deg) translate(-5px, 10px);
    }
  }

  * {
    box-sizing: border-box;
  }

  // antd-mobile 组件主题覆盖
  :root:root {
    --adm-color-primary: var(--adm-color-primary);
    --adm-color-success: var(--adm-color-success);
    --adm-color-warning: var(--adm-color-warning);
    --adm-color-danger: var(--adm-color-danger);
    
    // 按钮相关
    --adm-button-border-radius: 8px;
    --adm-button-font-size: 16px;
    
    // 导航栏相关
    --adm-nav-bar-height: 44px;
    --adm-nav-bar-background-color: white;
    
    // 列表相关
    --adm-list-item-padding-left: 16px;
    --adm-list-item-padding-right: 16px;
    --adm-list-item-height: 50px;
    
    // 表单相关
    --adm-form-item-padding-left: 16px;
    --adm-form-item-padding-right: 16px;
    --adm-form-item-height: 44px;
    
    // 卡片相关
    --adm-card-border-radius: 12px;
    --adm-card-padding: 16px;
  }

  // 动画相关
  .fade-enter {
    opacity: 0;
    transform: translateY(10px);
  }
  
  .fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms, transform 300ms;
  }
  
  .fade-exit {
    opacity: 1;
    transform: translateY(0);
  }
  
  .fade-exit-active {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms, transform 300ms;
  }

  // 滚动条美化
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: var(--adm-color-box);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--adm-color-text-secondary);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--adm-color-primary);
  }
`; 